<template>
	<view class="subhead-content">
		<!--
		    author: 李文昊
		    content-color: 前面一小段div的颜色
			title: 小标题
		-->
		<view class="content-color" :style="{'background-color':color}">
		</view>
		<view class="content-hr">
			<text class="content-text">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			color: String
		}
	}
</script>
<style>
	.subhead-content {
		width: 100%;
		/* 清除浮动 */
		overflow: hidden;
	}

	.content-color {
		background-color: rgba(9, 140, 238, 1);
		width: 12rpx;
		height: 87rpx;
		float: left;
		margin-top: 4rpx;
	}

	.content-hr {
		margin-left: 12rpx;
		border-top: 1rpx solid rgba(238, 238, 238, 1);
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		height: 89rpx;
		/* 利用行高垂直居中 */
		line-height: 89rpx;
	}



	.content-text {
		margin-left: 22rpx;
		font-size: 26rpx;
		font-weight: 600;
		font-family: '微软雅黑 Bold';
		color: #666666;
	}
</style>
